<template>
  <el-dialog title="新增标签"
             :visible="visible"
             width="30%"
             :append-to-body="true"
             destroy-on-close
             center
             @close="handleClose"
  >
    <div class="my-dialog">
      <el-select style="width: 100%" class="mrb10" v-model="formData.sortId" placeholder="请选择分类">
        <el-option
          v-for="item in sorts"
          :key="item.id"
          :label="item.sortName"
          :value="item.id">
        </el-option>
      </el-select>

      <el-input placeholder="请输入分类名称" v-model="formData.labelName">
        <template slot="prepend">标签名称</template>
      </el-input>

      <el-input placeholder="请输入分类描述" v-model="formData.labelDescription">
        <template slot="prepend">分类描述</template>
      </el-input>
    </div>

    <span slot="footer" class="dialog-footer">
          <el-button @click="handleClose()">取 消</el-button>
          <el-button type="primary" @click="saveEdit()">确 定</el-button>
      </span>
  </el-dialog>
</template>

<script>

export default {
  props: {
    // 页面是否显示参数
    visible: {
      type: Boolean,
      default: false
    },
    data: {
      type: Object,
      default: null
    },
    title: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      // 分类list
      sorts: [],
      formData: {
        id: null,
        sortId: null,
        labelName: null,
        labelDescription: null,
      }
    }
  },
  computed: {},
  watch: {},
  created() {
    // 获取分类列表
    this.getSorts();
  },
  mounted() {},
  methods: {
     getSorts() {
       this.$http.get(this.$constant.baseURL + "/webInfo/listSortAndLabel")
        .then((res) => {
          if (!this.$common.isEmpty(res.data)) {
            console.log("获取分类列表成功", res.data.sorts)
            this.sorts = res.data.sorts;
          }
        })
        .catch((error) => {
          this.$message({
            message: error.message,
            type: "error"
          });
        });
    },
    // 取消
    handleClose(){
      this.$emit('close');
    },
    // 保存
    saveEdit(){
      this.$http.post(this.$constant.baseURL + "/webInfo/saveLabel", this.formData, true)
        .then((res) => {
          this.$message({
            message: "新增成功！",
            type: "success"
          });
        })
        .catch((error) => {
          this.$message({
            message: error.message,
            type: "error"
          });
        }).finally(() => {
          this.$emit('close');
        });
    }
    }
}
</script>


<style scoped>

.my-dialog > div {
  margin: 12px;
}

.my-dialog >>> input::-webkit-inner-spin-button {
  appearance: none;
}
</style>
